<template>
	<view>
		<view style="height: 400upx;background-image: url(../../static/gerenzhongxin04.jpg);text-align: center;display: flex;position: relative;">
			<view style="height: 60upx;line-height: 60upx;font-size: 38upx;color: #ffffff;flex: 1;margin-top: 60upx;">
				<view style="display: flex;">
					<view style="flex: 1;margin-left: 30upx;">
						<image src="../../static/shezhi.png" style="width: 60upx;height: 60upx;" @click="jump" data-src="../commission/qrcode/qrcode"></image>
					</view>
					<view style="flex: 1;">
						<image src="../../static/kefu_ico.png" style="width: 60upx;height: 60upx;" @click="jump" data-src="../commission/qrcode/customer"></image>
					</view>
				</view>
				<!-- <view style="margin-top: 170upx;">
					<image src="../../static/qiandaoicon.png" style="width: 80upx;height: 80upx;" @click="jump" data-src="sign/sign"></image>
				</view> -->
			</view>
			<!-- 昵称 -->
			 <view style="height: 60upx;line-height: 60upx;font-size: 38upx;color: #ffffff;flex: 2;">
				 <view style="margin-top: 80upx;">
				 	<image :src="res.avatar" style="width: 128upx;height: 128upx;border-radius:50%;border:4upx solid #fff;" mode=""></image>
				 </view>
				 <view class="name">{{res.nickname}}</view>
				 <view class="lv">
				 	<text v-cloak>我的邀请码：{{res.yqm}}</text>
				 </view>
			 </view>
			 <view style="height: 60upx;line-height: 60upx;font-size: 38upx;color: #ffffff;flex: 1;margin-top: 60upx;">
				 <view class="">
				 	
				 </view>
			 </view>
		</view>
		
		<view class="short_all" style="margin-top: -120upx;">
			<view class="nav">
				<view class="top">
					<view class="uni-list">
						<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../order/order?index=0">
							<view class="uni-list-cell-navigate uni-navigate-right">
								<image src="../../static/order4.png" mode=""></image>
								<text class="text" style="color: #888;font-size: 32upx;font-weight: 550;">全部订单</text>
								<text class="right">查看全部订单</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cont clear">
					<view class="list" v-for="(item,index) in order" :key="index" @click="jump" :data-src="item.src">
						<image :src="item.icon" mode=""></image>
						<text v-cloak>{{item.text}}</text>
						<uni-badge :text="item.badge" type="danger" v-if="item.badge > 0"></uni-badge>
					</view>
				</view>
			</view>
			<!-- 横向flex图文数据列表 -->
			<!-- <view style="display: flex;background-color: #FFFFFF;">
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:4upx solid #eeeeee;" @click="jump" data-src="./details/a_kzp">
					<image src="../../static/jifen_1.png" style="width: 80upx;height: 70upx;margin-top: 30upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">可提现收益</view>
					<view style="">{{res.a_kzp}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:4upx solid #eeeeee;" @click="jump" data-src="./details/credit">
					<image src="../../static/jifen.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">积分值</view>
					<view style="">{{res.credit1}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:3upx solid #eeeeee;" @click="jump" data-src="./details/bz">
					<image src="../../static/bz.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">币值</view>
					<view style="">{{res.bz}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;" @click="jump" data-src="./details/tzz">
					<image src="../../static/zhengquan.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">通证值</view>
					<view style="">{{res.tzz}}</view>
				</view>
			</view> -->
			
			<view class="list">
				<view class="uni-list bottom_">
					<view class="uni-list-cell" :hover-class="active" @click="jumpno" data-src="../gift_income/gift">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<image src="../../static/jilu.png" mode="" style="visibility: hidden;"></image>
							<text class="text" style="font-size: 32upx;font-weight: 555;margin-left: -46upx;">我的钱包</text>
							<text style="color: #999;font-size: 24upx;padding-right: 20upx;margin-bottom: 6upx;">查看详情</text>
						</view>
					</view>
					<view class="uni-list-cell" :hover-class="active">
						<view style="display: flex;width: 90%;margin: 20upx 5%;">
							<view style="flex: 1;" @click="jump" data-src="./details/a_kzp">
								<view style="font-size: 30upx;color: #FF0000;font-weight: 555;">{{res.a_kzp}}</view>
								<view class="e-b" style="color: #999;font-size: 22upx;">可提现收益(元)</view>
							</view>
							<view style="flex: 1;" @click="jump" data-src="./details/credit">
								<view style="font-size: 30upx;font-weight: 555;">{{res.credit1}}</view>
								<view class="e-b" style="color: #999;font-size: 22upx;">积分值</view>
							</view>
						</view>
					</view>
					<view class="uni-list-cell" :hover-class="active">
						<view style="display: flex;width: 90%;margin: 20upx 5%;">
							<view style="flex: 1;" @click="jump" data-src="./details/bz">
								<view style="font-size: 30upx;font-weight: 555;">{{res.bz}}</view>
								<view class="e-b" style="color: #999;font-size: 22upx;">币值</view>
							</view>
							<view style="flex: 1;" @click="jump" data-src="./details/tzz">
								<view style="font-size: 30upx;font-weight: 555;">{{res.tzz}}</view>
								<view class="e-b" style="color: #999;font-size: 22upx;">通证值</view>
							</view>
							<view style="flex: 1;">
								<view style="font-size: 30upx;font-weight: 555;">{{res.credit2}}</view>
								<view class="e-b" style="color: #999;font-size: 22upx;">余额</view>
							</view>
							<!-- <view style="flex: 1;">
								<view style="font-size: 30upx;font-weight: 555;">{{res.giftdata.libao_jicha}}</view>
								<view class="e-b" style="color: #999;font-size: 22upx;">礼包奖励</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 广告 -->
			<!-- <view>
				<image src="../../static/gerenzhongxin_1.png" class="img_1" @click="jumpto" style="border-radius: 80upx;"></image>
			</view> -->
			<!-- 收入来源 -->
			<!-- <view class="list flexfather">
				<view class="uni-list" style="display: inline-block;text-align: center;">
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../member/acommsion/acommsion" style="display: inline-block;">
						<view class="uni-list-cell-navigate ">
						<image src="../../static/shouru.png" mode="" style="margin-right:10px;" class="img_11"></image>
						<text style="font-size: 25upx;font-weight:550">业务收入</text>
						</view>
					</view>
				</view>
				<view class="uni-list" style="display: inline-block;text-align: center;">
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../gift_income/gift" style="display: inline-block;">
						<view class="uni-list-cell-navigate ">
						<image src="../../static/shouru.png" mode="" style="margin-right:10px;" class="img_22"></image>
						<text style="font-size: 25upx;font-weight:550">礼包收入</text>
						</view>
					</view>
				</view>
				<view class="uni-list" style="display: inline-block;text-align: center;">
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../ally_income/ally_income" style="display: inline-block;">
						<view class="uni-list-cell-navigate ">
						<image src="../../static/shouru.png" mode="" style="margin-right:10px;" class="img_22"></image>
						<text style="font-size: 25upx;font-weight:550">商盟收入</text>
						</view>
					</view>
				</view>
			</view> -->
			<view class="list">
				<view class="uni-list">
					<view class="uni-list-cell" :hover-class="active" @click="jumpcart" data-src="/cart/cart">
						<view class="uni-list-cell-navigate uni-navigate-right">
						<image src="../../static/order.png" mode=""></image>
						<text class="text">我的购物车</text>
						</view>
					</view>
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="./getdetails/getdetails">
						<view class="uni-list-cell-navigate uni-navigate-right">
						<image src="../../static/shouyi-1.png" mode=""></image>
						<text class="text">我的收益</text>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<!-- <view class="uni-list-cell" :hover-class="active" @click="jump" data-src="favorite">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<image src="../../static/love_fill.png" mode=""></image>
							<text class="text">我的关注</text>
							<uni-badge :text="res.favorite" type="danger" v-if="res.favorite > 0"></uni-badge>
						</view>
					</view> -->
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="history">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<image src="../../static/foot.png" mode=""></image>
							<text class="text">我的足迹</text>
						</view>
					</view>
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="sign/sign">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<image src="../../static/addr.png" mode=""></image>
							<text class="text">积分签到</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="history-section icon" style="overflow: hidden;">
				<view class="sec-header">
					<text class="yticon icon-lishijilu"></text>
					<text>浏览历史</text>
				</view>
				<scroll-view scroll-x class="h-list">
					<view v-for="img in data" style="display: inline-block;">
						<image @click="jumpgoods(img.goodsid)" :src="img.thumb" mode="aspectFill"></image>
						<!-- <image @click="navTo('/goods/detail?goodsid=' + img.goodsid)" :src="img.thumb" mode="aspectFill"></image> -->
					</view>
				</scroll-view>
			</view>
			
			<view>
				<view style="display: flex;margin: 20upx auto 0;border-radius: 10upx 10upx 0 0;overflow: hidden;background-color: #ffffff;border-bottom: 2upx solid #EEEEEE;">
					<view style="flex: 1;width: 100%;height: 155upx;border-right: 2upx solid #eeeeee;" @click="jump" data-src="favorite">
						<image src="../../static/guanzhu.png" mode="" style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
						<view style="text-align: center;margin-top: -26upx;">
							我的关注
						</view>
					</view>
					<view style="flex: 1;width: 100%;height: 155upx;" @click="jump" data-src="./address/address">
						<image src="../../static/dizhi.png" mode="" style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
						<view style="text-align: center;margin-top: -26upx;">
							地址管理
						</view>
					</view>
					<view style="flex: 1;width: 100%;height: 155upx;border-left: 2upx solid #eeeeee;" @click="jump" data-src="../commission/qrcode/invite_code">
						<image src="../../static/haibao.png" mode="" style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
						<view style="text-align: center;margin-top: -26upx;">
							专属海报
						</view>
					</view>
				</view>
				<view style="display: flex;margin: 0upx auto 20upx;border-radius: 0 0 10upx 10upx;overflow: hidden;background-color: #ffffff;">
					<view style="flex: 1;width: 100%;height: 155upx;border-right: 2upx solid #eeeeee;" @click="jump" data-src="./info/info">
						<image src="../../static/ziliao.png" mode="" style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
						<view style="text-align: center;margin-top: -26upx;">
							会员资料
						</view>
					</view>
					<view style="flex: 1;width: 100%;height: 155upx;" @click="jump" data-src="../member/bankcard/bankcard">
						<image src="../../static/fankui.png" mode="" style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
						<view style="text-align: center;margin-top: -26upx;">
							银行卡绑定
						</view>
					</view>
					<view style="flex: 1;width: 100%;height: 155upx;border-left: 2upx solid #eeeeee;" @click="jump" data-src="verified/verified">
						<image src="../../static/dingdan.png" mode="" style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
						<view style="text-align: center;margin-top: -26upx;">
							实名认证
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import uniBadge from "../../components/uni-badge.vue";
	export default {
		data() {
			return {
				res:[],
				order:[{
					text: '待付款',
					icon:'../../static/order0.png',
					src:'../order/order?index=1',
					badge: 0
				},{
					text: '待发货',
					icon:'../../static/order1.png',
					src:'../order/order?index=2',
					badge: 0
				},{
					text: '待收货',
					icon:'../../static/order2.png',
					src:'../order/order?index=3',
					badge: 0
				},{
					text: '已完成',
					icon:'../../static/order3.png',
					src:'../order/order?index=4',
					badge: 0
				}],
				is_realname:'',
				active:"active",
				openid:'',
				data:[],
			};
		},
		components: {
			uniBadge
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		onNavigationBarButtonTap:function(e){
			uni.navigateTo({
				url: 'info/info'
			});
    },
		methods:{
			setAjax(){
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						uni.hideLoading()
						this.res = res.data
						this.is_realname = res.data.is_realname
						var order = this.order
						for(var i in order){
							this.order[i].badge = res.data.order[i]
						}
					},
					fail: () => {},
					complete: () => {}
				});
				// 浏览历史
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.history.get_list&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.data = res.data.result.list
						// console.log(this.data)
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			jumpno () {
				uni.showModal({
				title:'提示',
				content:'功能即将开放',
				showCancel: false,
				confirmColor:"#DD524D",
					success() {
						return
					}
				})
			},
			jumptab(e){
				uni.switchTab({
					url:e.currentTarget.dataset.src
				})
			},
			jumpcart(e){
				// console.log('/pages'+e.currentTarget.dataset.src);return;
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},
			jumpto() {
				uni.navigateTo({
					url: '/pages/commission/qrcode/invite_code'
				})
			},
			setup(){
				uni.navigateTo({
					url: './info/info'
				});
			}
		}
	}
</script>

<style lang="scss">
	.bottom_ {
		margin-bottom: 18upx;
	}
	.short_all {
		width: 95%;
		margin: 0 auto;
	}
	.flexfather {
		display: flex;
	}
	.flexfather view {
		flex: 1;
		
	}
	.imgbgc {
		width: 100%;
		height: 400upx;
		border-radius: 0 0 300upx 300upx/0 0 36upx 36upx;
		background-size: cover;
		opacity: 0.80;
	}
	.img_1 {
		width: 100%;
		height: 200upx;
		margin-top: 20upx;
	}
	.img_11 {
		width: 150upx;
		height: 150upx;
	}
	* {box-sizing:border-box;}
	.btn {padding:20upx 24upx;}
	.btn button {margin:20upx 0;font-size:28upx;padding:8upx;}
	.btn .changePwd {background:#fff;border:2upx solid  #175e3c;color:#175e3c;}
	.btn .logout {border-color:#175e3c;background-image: linear-gradient(to bottom, rgb(243, 109, 31), rgb(252, 9, 9));color: #fff;margin-bottom: -40upx; }
	.btn .logout_1 {border-color:#175e3c;background-image: linear-gradient(to bottom, rgb(243, 109, 31), rgb(252, 9, 9));color: #fff;}
	.headinfo {height:290upx;overflow:hidden;position:relative;z-index:10;}
	.headinfo>image {position:absolute;width:750upx;height:290upx;}
	.headinfo .info {padding:80upx 40upx 0;position:relative;z-index:1;}
	.headinfo .info .top {position:absolute;top:0;left:0;width:750upx;padding:20upx 10upx;z-index:1;}
	.headinfo .info .top image {width:34upx;height:34upx;float:right;margin-right:20upx;}
	.headinfo .info .userinfo .webkit image {width:128upx;height:128upx;border-radius:50%;border:4upx solid #fff;margin-right:24upx;}
	.headinfo .info .userinfo .webkit .flex .name {height:50upx;color:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left;font-size:40upx;line-height:40upx;color:#fff;margin-bottom:6upx;/* padding-top:10upx;*/}
	.headinfo .info .userinfo .webkit .flex .lv text {display:block;line-height:36upx;font-size:24upx;color:#fff;}
	.headinfo .kefu {height:110upx;width:170upx;position:absolute;right:-4upx;bottom:-8upx;transform:rotate(8deg);}
	.uni-list-cell.active {background:#f5f5f5;}
	.uni-list image {width:40upx;height:40upx;}
	.uni-list .text {position:absolute;left:84upx;font-size:30upx;color: #444;}
	.uni-list {margin-top:20upx;border-radius: 15upx;}
	.uni-list:before,.uni-list:after {display:none;}
	.uni-list-cell:after {content:" ";position:absolute;left:0.5rem;right:0.5rem;bottom:-1px;height:1px;border-top:1px solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);background:none;}
	.uni-list-cell .right {font-size:24upx;color:#999;margin-right:20upx;}
	.uni-list .uni-list-cell:last-child:after {border:0;}
	.uni-list .uni-badge {margin-right:15px;background-color:#f55;}
	.nav {padding-top:40upx;background:#fff;margin-top:-40upx;}
	.nav .top {border-bottom:1px solid #f5f5f5;}
	.nav .top .uni-list {margin:0;}
	.nav .cont {background:#fff;}
	.nav .cont .list {float:left;width:25%;padding:28upx 0;position:relative;}
	.nav .cont .list image {width:50upx;height:50upx;margin:0 auto;display:block;}
	.nav .cont .list text {text-align:center;display:block;font-size:26upx;margin-top:10upx;}
	.nav .uni-badge {position:absolute;top:4upx;right:40upx;background:#f55;}
	.xvqian {display:unset;border: 1px solid #fff;border-radius: 5px;padding: 5px;color: #fff;margin-left:5px;}
	
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			align-items: center;
			// font-size: $font-base;
			// color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
</style>
